<template>
    <el-dialog :model-value="dialogVisible" :title="title" width="65%" @close="handleClose" align-center>

        <div class="container">
            <el-scrollbar>
                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm"
                    status-icon>

                    <el-form-item label="用户昵称" prop="nickName">
                        <el-input size="large" v-model="ruleForm.nickName" type="text" autocomplete="off" />
                    </el-form-item>

                    <el-row>
                        <el-col :md="12" :xs="18">
                            <el-form-item label="手机号" prop="phonenumber">
                                <el-input size="large" v-model="ruleForm.phonenumber" type="text" autocomplete="off" />
                            </el-form-item>
                        </el-col>
                        <el-col :md="12" :xs="18">
                            <el-form-item label="邮箱" prop="email">
                                <el-input size="large" v-model="ruleForm.email" type="text" autocomplete="off" />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row v-show="props.id == -1">
                        <el-col :md="12" :xs="18">
                            <el-form-item label="用户名" prop="userName">
                                <el-input size="large" v-model="ruleForm.userName" type="text" autocomplete="off" />
                            </el-form-item>
                        </el-col>
                        <el-col :md="12" :xs="18">
                            <el-form-item label="密码" prop="password">
                                <el-input size="large" v-model="ruleForm.password" type="text" autocomplete="off" />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-form-item label="头像" prop="avatar">
                        <el-upload v-model:file-list="fileList" list-type="picture-card" :auto-upload="false">
                            <el-icon>
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </el-form-item>

                    <el-form-item label="性别" prop="sex">
                        <el-radio-group v-model="ruleForm.sex">
                            <el-radio :value="0" size="large" border>男</el-radio>
                            <el-radio :value="1" size="large" border>女</el-radio>
                            <el-radio :value="2" size="large" border>其他</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="角色" prop="role">
                        <el-select v-model="value" multiple placeholder="Select" size="large" style="width:300px">
                            <el-option v-for="item in options" :key="item.id" :label="item.roleName" :value="item.id" />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="状态" prop="status">
                        <el-radio-group v-model="ruleForm.status">
                            <el-radio :value="0" size="large" border>正常</el-radio>
                            <el-radio :value="1" size="large" border>禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </el-scrollbar>
        </div>

        <template #footer class="footer">
            <div class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="handleConfirm">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>


<script setup>
import { ref, reactive, watch } from 'vue';
import { ElMessage } from 'element-plus'
import { getAllRolesAPI, addUserAPI, UploadImgAPI, getRoleIdByUserIdAPI, updateUserAPI } from '@/api';

const emits = defineEmits(['update:modelValue', 'initUserList'])

const originaluserData = () => ({
    id: '',
    userName: '',
    nickName: '',
    phonenumber: '',
    password: '',
    email: '',
    status: 0,
    avatar: '',
    sex: 0,
    rolesId: [],
})

let ruleForm = reactive(originaluserData())

const fileList = ref([])

const props = defineProps({
    title: {
        type: String,
        default: "标题"
    },
    dialogVisible: {
        type: Boolean,
        default: false
    },
    userInfoValue: {
        type: Object,
        default: {}
    },
    id: {
        type: Number,
        default: -1,
    }
})

const rules = reactive({
    userName: [
        { required: true, message: 'Please input ', trigger: 'blur' },
    ],
    password: [
        { required: true, message: 'Please input ', trigger: 'blur' },
    ],
    nickName: [
        { required: true, message: 'Please input ', trigger: 'blur' },
    ],
})

const options = ref([])
const value = ref('')
//获取角色下拉数据
const getSelectRole = async () => {
    let res = await getAllRolesAPI()
    options.value = res
}

const initRoleId = async (val) => {
    const res = await getRoleIdByUserIdAPI(val)
    value.value = res
}

const handleClose = () => {
    emits('update:modelValue', false)
}

const handleConfirm = async () => {
    //先获取fileList图片调后端接口上传图片
    const formData = new FormData()
    if (fileList.value[0].raw) {
        formData.append("file", fileList.value[0].raw)
        const res = await UploadImgAPI(formData)
        ruleForm.avatar = res
    }
    let ras = reactive()
    ruleForm.rolesId = value.value
    const rus = ref()
    if (props.id == -1) {
        ras = await addUserAPI(ruleForm)
        rus.value = "添加成功"
    }
    else {
        ras = await updateUserAPI(ruleForm)
        rus.value = "更新成功"
    }
    if (ras != false) {
        ElMessage.success(rus.value)
        emits('initUserList')
        handleClose()
    }
}

watch(
    () => props.dialogVisible,
    () => {
        if (props.dialogVisible == true) {
            getSelectRole()
            if (props.id != -1) {
                let img = []
                let obj = {}
                initRoleId(props.id)
                ruleForm = props.userInfoValue
                obj.url = ruleForm.avatar
                img.push(obj)
                fileList.value = img
            }
        }
    }, { deep: true, immediate: true })
</script>

<style lang="scss" scoped>
.container {
    margin: 20px 40px;
    font-family: "微软正黑体";
    font-size: 16px;
    font-weight: 800;
}
</style>